<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>智能车自动测评系统</title>
    <link rel="stylesheet" href="layui_src/css/layui.css" media="all">
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/ic.png">
    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <style>
        .layui-tab {
            margin: 0;
        }

        .layui-nav .layui-nav-item .fleetShow {
            padding: 0 0 0 30px;
            height: 45px;
            line-height:45px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
		$(function () {
			$("iframe").css("height", $(".layui-body").height() - 47);
			$(window).resize(function () {
				$("iframe").css("height", $(".layui-body").height() - 47);
			})
		})
    </script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <nav class="navbar  navbar-fixed-top" role="navigation" style="height: 67px; background-image:url(img/top.jpg);">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        </div>
        <!-- Top Menu Items -->
        <ul class="nav navbar-right top-nav">

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span
                        id="userName"></span> <b
                        class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">测评信息</a>
                    <dl class="layui-nav-child">
                        <dd class="site-demo-active" data-type="" data-id="11">实时测评</dd>
                        <dd class="site-demo-active" data-type="tabAdd" data-url="achievement.html" data-id="99">历史查询</dd>
                        <dd class="site-demo-active" data-type="tabAdd" data-url="ParticipatingTeamsList.html" data-id="77">测评车辆列表</dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">测评管理</a>
                    <dl class="layui-nav-child">
                        <dd class="site-demo-active" data-type="tabAdd" data-url="achievement.html" data-id="22">测评结果管理</dd>
                        <dd class="site-demo-active" data-type="tabAdd" data-url="ParticipatingTeams.html" data-id="33">测评车辆管理</dd>
                        <dd class="site-demo-active" data-type="tabAdd" data-url="Court.html" data-id="44">测评线路管理</dd>
                        <dd class="site-demo-active" data-type="tabAdd" data-url="Fault.html" data-id="55">测评场景管理</dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">基础数据</a>
                    <dl class="layui-nav-child">
                        <dd class="site-demo-active" data-type="tabAdd" data-url="device.html" data-id="66">测评设备管理</dd>
                        <!--  <dd class="site-demo-active" data-type="tabAdd" data-url="Referee.html" data-id="77">裁判管理</dd> -->
                        <dd class="site-demo-active" data-type="tabAdd" data-url="User.html" data-id="88">测评用户管理</dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this back_index" lay-id="11">后台首页</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe src="index1.html" frameborder="no" style="width:100%;height:800px;"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        Copyright © 2017-2020 青岛慧拓智能机器
    </div>
</div>
<script type="text/javascript" src="js/common.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="layui_src/layui.js"></script>
<script type="text/javascript" src="js/common.js"></script>

<script>
	//JavaScript代码区域
	$(function () {
		var userName = localStorage.getItem("userName");
		$("#userName").text(userName);
		if (!userName) {
			window.location.href = 'login.html';
		};


		layui.use('element', function () {
			var $ = layui.jquery
				, element = layui.element;

        var sessst=window.sessionStorage;
		//console.log(sessst);
		var longs=sessst.length,num=0;
		for(var o in sessst){
			if(o=="menu"){      //如果已经有打开的页面
				//console.log(sessst.getItem("menu"));
				//console.log(typeof(sessst.getItem("menu")));
                menu=JSON.parse(sessst.getItem("menu"));
				//console.log(menu);
				curmenu = window.sessionStorage.getItem("curmenu");
				for(var i=0;i<menu.length;i++){
					element.tabAdd("demo",{
						title : menu[i].title,
						content :'<iframe src="' + menu[i].urls + '" frameborder="no" style="width:100%;height:800px;"></iframe>',
						id : menu[i].layid
					})
					//关闭标签时更新sessionStorage
                    var _thisId=menu[i].layid;
					$(".layui-tab-title i.layui-tab-close:last").on("click",function () {
						var menuVal=JSON.parse(sessionStorage.getItem("menu"));
						var _curId=sessionStorage.getItem("curmenu")
						var _thisIds=_thisId
						console.log(_thisIds);
						for (var i=0;i<menuVal.length;i++){
							if (menuVal[i].layid==_thisIds){
								console.log(i);
								menuVal.splice(i,1);
								window.sessionStorage.setItem("menu",JSON.stringify(menuVal));
								if (menuVal[i].layid==_curId){
									if (menuVal[i]){
										window.sessionStorage.setItem("curmenu",menuVal[i].layid);
									}else{
										window.sessionStorage.setItem("curmenu",menuVal[menuVal.length-1].layid);
									}
                                }

							}
						}

					})
					//定位到刷新前的窗口
					if(curmenu != "undefined"){
						element.tabChange("demo",curmenu);
						$(".layui-nav-tree").find('dd').each(function () {
                            if ($(this).attr("data-id")==curmenu){
                            	$(this).addClass("layui-this");
                            	$(this).parents("li").addClass("layui-nav-itemed");
                            }
						})
					}else{
						element.tabChange("demo",menu[menu.length-1].layId);
					}
				}
				return false;
            }
            num++;
			//console.log(num);
			if(num>=longs){     //没有已打开的页面
                console.log(444)
            }

        }
		})
	})

	layui.use('element', function () {
		var $ = layui.jquery
			, element = layui.element;
		$('.site-demo-active').on('click', function () {
			var othis = $(this), type = othis.data('type'), urls = othis.data('url'), titles = othis.html(),
				TabId = othis.data('id');
			var num = 0;
			for (var i = 0; i < $(".layui-tab-title li").length; i++) {
				if (TabId == $(".layui-tab-title li").eq(i).attr('lay-id')) {
					element.tabChange('demo', TabId);
					window.sessionStorage.setItem("curmenu",TabId);
					return false;
				}
				num++;
			}
			//console.log(num);
			//console.log($(".layui-tab-title li").length);
			if (num == $(".layui-tab-title li").length) {
				element.tabAdd('demo', {
					title: titles
					, content: '<iframe src="' + urls + '" frameborder="no" style="width:100%;height:800px;"></iframe>'
					, id: TabId
				});
                //设置session stoage
				var menuThis='{"urls":"'+urls+'","title":"'+titles+'","layid":"'+TabId+'"}';
				var sessst=window.sessionStorage;
				//console.log(menuThis);
				var longs=sessst.length,num=0;
				for(var o in sessst){
					if(o=="menu"){      //如果已经有storage
						var menuVal=JSON.parse(sessionStorage.getItem("menu"));
						menuVal.push(JSON.parse(menuThis));
						//console.log(menuVal);
						window.sessionStorage.setItem("menu",JSON.stringify(menuVal));
						window.sessionStorage.setItem("curmenu",TabId);
						break;
					}
					num++;
					if(num>=longs){     //没有storage
						window.sessionStorage.setItem("menu","["+menuThis+"]");
						window.sessionStorage.setItem("curmenu",TabId);
					}

				}
                //关闭标签时更新sessionStorage
				$(".layui-tab-title i.layui-tab-close:last").on("click",function () {
					var menuVal=JSON.parse(sessionStorage.getItem("menu"));
					var curId=sessionStorage.getItem("curmenu")
					var _thisId=TabId;
					console.log(_thisId);
					for (var i=0;i<menuVal.length;i++){
						if (menuVal[i].layid==_thisId){
							console.log(i);
							menuVal.splice(i,1);
							window.sessionStorage.setItem("menu",JSON.stringify(menuVal));
							if (menuVal[i].layid==curId){
								if (menuVal[i]){
									window.sessionStorage.setItem("curmenu",menuVal[i].layid);
								}else{
									window.sessionStorage.setItem("curmenu",menuVal[menuVal.length-1].layid);
								}
                            }

                        }
                    }

				})
			}
			element.tabChange('demo', TabId);
			$("iframe").css("height", $(".layui-body").height() - 47);

		});
	});
</script>
</body>
</html>
